<template>
    <el-dialog title="客户列表" :close-on-click-modal="false" :visible.sync="visible" :append-to-body="true"
        class="SHZY-dialog SHZY-dialog_center" lock-scroll width="50%">
        <div class="SHZY-common-layout">
            <div class="SHZY-common-layout-center" style="height: 550px;">
                <el-row class="SHZY-common-search-box" :gutter="16">
                    <el-form @submit.native.prevent="">
                        <el-col :span="6">
                            <el-form-item label="客户编码">
                                <el-input v-model="query.code" placeholder="客户编码" @keyup.enter.native="search"
                                    clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="客户名称">
                                <el-input v-model="query.name" placeholder="客户名称" @keyup.enter.native="search"
                                    clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item>
                                <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
                                <el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </el-form>
                </el-row>
                <div class="SHZY-common-layout-main SHZY-flex-main">
                    <SHZY-table v-loading="listLoading" :data="list" @sort-change='sortChange' custom-column
                        @cell-dblclick="confirm">
                        <el-table-column label="客户编码" prop="code" align="left" show-overflow-tooltip sortable='custom'>
                        </el-table-column>
                        <el-table-column label="客户名称" prop="name" align="left" sortable='custom' show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column label="客户类型" prop="type" align="left" sortable='custom' show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column label="客户分类" prop="classify" align="left" sortable='custom'
                            show-overflow-tooltip>
                        </el-table-column>


                    </SHZY-table>
                    <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
                        @pagination="initData" />
                </div>
            </div>

        </div>
    </el-dialog>
</template>

<script>
import { getCustomerList } from '@/api/common/customer'

export default {
    components: {},
    name: "common-customer",
    data() {
        return {
            showAll: false,
            query: {
                code: undefined,
                name: undefined,
                type: undefined,
            },
            list: [],
            listLoading: true,
            multipleSelection: [],
            total: 0,
            listQuery: {
                currentPage: 1,
                pageSize: 20,
                sort: "desc",
                sidx: "",
            },
            formVisible: false,
            importFormVisible: false,
            exportBoxVisible: false,
            visible: false,


        }
    },
    computed: {
        menuId() {
            return this.$route.meta.modelId || ''
        }
    },
    created() {

        this.initData()
    },
    methods: {

        sortChange({ column, prop, order }) {
            this.listQuery.sort = order == 'ascending' ? 'asc' : 'desc'
            this.listQuery.sidx = !order ? '' : prop
            this.initData()
        },
        initData() {
            this.visible = true
            this.listLoading = true;
            let _query = {
                ...this.listQuery,
                ...this.query,
                menuId: this.menuId,
            };
            let query = {}
            for (let key in _query) {
                if (Array.isArray(_query[key])) {
                    query[key] = _query[key].join()
                } else {
                    query[key] = _query[key]
                }
            }
            getCustomerList(query).then(res => {
                this.list = res.data.list
                this.total = res.data.pagination.total
                this.listLoading = false
            })
        },


        search() {
            this.listQuery = {
                currentPage: 1,
                pageSize: 20,
                sort: "asc",
                sidx: "",
            }
            this.initData()
        },
        refresh(isrRefresh) {
            this.formVisible = false
            if (isrRefresh) this.reset()
        },
        reset() {
            for (let key in this.query) {
                this.query[key] = undefined
            }
            this.listQuery = {
                currentPage: 1,
                pageSize: 20,
                sort: "asc",
                sidx: "",
            }
            this.initData()
        },

        confirm(row, column, cell, event) {

            this.$emit('confirm', row)
            this.visible = false;
        }

    }
}
</script>

<style scoped lang="scss">
::v-deep .el-dialog .el-dialog__body {
    padding: 10px !important;
}
</style>